<!-- 任务管理的盒子 -->
<template>
  <div class="task obox bs" @click="goNav()">
    <div class="task_ricon img" v-if="item.istop==1">
      <img src="@/assets/img/index_icon14.png" alt />
    </div>
    <div class="task_title ellipsis-1">{{item.title}}</div>
    <div class="task_info cenFlex">
      <div class="task_info_l">任务详情:</div>
      <div class="task_info_r ellipsis-2">{{item.detail}}</div>
    </div>
    <div class="task_bottom sbFlex">
      <div class="task_bottom_l cenFlex">
        <div class="task_bottom_l_in_icon img">
          <img src="@/assets/img/index_icon13.png" alt />
        </div>
        <div class="task_bottom_l_in_txt">{{item.score || 0}}积分<span v-if="item.scoreType==1">/{{item.scoreUnit || '次'}}</span></div>
        <div class="task_bottom_l_in_tip img" v-if="item.state==0 || item.state==1 || item.state==3">
          <img
            :src="item.state==0?examineArr[0]:item.state==1?examineArr[1]:item.state==3?examineArr[2]:''"
            alt
          />
        </div>
      </div>
      <div class="task_bottom_r all_btn cenFlex">{{item.state==0?'待审核':item.state==1?'未通过':item.state==2?'已通过':item.state==3?'已过期':item.state==4?'待完成':'未知状态'}}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object, // 是否可多选
      default: {},
    },
    url:{
      type: String, // 是否可多选
      default: '',
    }
  },
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      examineArr: [
        require("@/assets/img/index_icon10.svg"), //审核
        require("@/assets/img/index_icon11.svg"), //未通过
        require("@/assets/img/index_icon12.svg"), //已过期
      ],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 点击前往对应的页面
    goNav() {
      let {item} = this;
      this.$router.push(`${this.url}?id=${item.missionId}&state=${item.state}`);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
.task {
  background: #fff;
  padding: 15px;
  position: relative;
  .task_ricon {
    position: absolute;
    right: 5px;
    top: 5px;
    width: 16px;
    height: 16px;
  }
  .task_title {
    font-weight: 600;
    margin-bottom: 8px;
  }
  .task_info {
    width: 100%;
    align-items: flex-start;
    color: $nicegray;
    line-height: 1.5;
    font-size: 14px;
    .task_info_l {
      width: 70px;
      min-width: 70px;
    }
    .task_info_r {
      width: 100%;
    }
  }
  .task_bottom {
    margin-top: 20px;
    .task_bottom_l {
      .task_bottom_l_in_icon {
        width: 18px;
        height: 18px;
        min-width: 18px;
        margin-right: 3px;
      }
      .task_bottom_l_in_txt {
        margin-right: 5px;
        font-size: 14px;
      }
      .task_bottom_l_in_tip {
        width: 56px;
      }
    }
    .task_bottom_r {
      padding: 4px 15px;
      font-size: 12px;
      border-radius: 3px;
    }
  }
}
</style>